<script setup lang="ts">
import useDragramStore from '../../store/useDragramStore'
import InputBox from './components/InputBox.vue'
import { tools, type ToolType } from './tools'

const dragramStore = useDragramStore()
// 新增交互
const addInteraction = (tool: any) => {
  dragramStore.addInteractionElement(tool.type, tool.title)
}
</script>

<template>
  <section class="tools-wrapper">
    <!-- 元素 -->
    <div v-for="item in tools" :key="item.title" class="tool-block">
      <h3 class="tool-block__title">{{ item.title }}</h3>
      <ul class="tool-block__content">
        <li v-for="(tool, index) in item.tools" :key="index" class="tool-block__cell">
          <template v-if="tool.interaction === 'drag'">
            <input-box
              :title="tool.title"
              :data-type="tool.type"
              :data-title="tool.title"
            />
          </template>
          <template v-else-if="tool.interaction === 'click'">
            <el-button plain size="small" @click="addInteraction(tool)">{{ tool.title }}</el-button>
          </template>
        </li>
      </ul>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.tools-wrapper {
  border-right: 1px solid #dcdfe6;
  .tool-block {
    border-bottom: 1px solid var(--border-color);
    .tool-block__title {
      font-size: 15px;
      font-weight: 500;
      padding: 10px 20px;
    }
    .tool-block__content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: 0 10px 10px 20px;
      column-gap: 5px;
      row-gap: 10px;
    }
    .tool-block__cell {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
